<template>
  <div class="shoplist">
    <div class="top">
      <div class="title">饿了么</div>
      <input type="text" placeholder="输入商家、商品名称" />
    </div>
    <div class="banner">
      <img
        v-for="(item, index) in arr1"
        :key="index"
        :src="item.bannerUrl"
        alt=""
      />
    </div>
    <div class="guess">猜你喜欢</div>
    <div class="option">
      <div>综合排序</div>
      <div>距离最近</div>
      <div>销量最高</div>
      <div>筛选</div>
    </div>
    <div class="box">
      <div>年货节热卖</div>
      <div>津贴联盟</div>
      <div>满减优惠</div>
      <div>品质联盟</div>
    </div>
    <div class="item">
      <div
        class="list"
        v-for="(item, index) in arr"
        :key="index"
        @click="handleClick(item.mtWmPoiId)"
      >
        <img :src="item.picUrl" alt="" />
        <div class="right">
          <div class="name">{{ item.name }}</div>
          <div class="count">{{ item.monthSalesTip }}</div>
          <div class="qisong">
            <span>{{ item.minPriceTip }}</span>
            <span>{{ item.distance }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shoplist } from "../../api/index";
import { banner } from "../../api/index";
import { details } from "../../api/index"
export default {
  data() {
    return {
      arr: [],
      arr1: [],
    };
  },
  mounted() {
    shoplist({}).then((res) => {
      // console.log(res.data.list);
      this.arr = res.data.list;
    }),
      banner({}).then((res) => {
        // console.log(res.data.list);
        this.arr1 = res.data.list;
      });
  },
  methods:{
    handleClick(id){
      this.$router.push('/details/'+id)
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input,
button {
  border: 0;
  outline: none;
}
.shoplist {
  width: 100%;
}
.shoplist .top {
  background-color: skyblue;
  padding: 10px;
}
.shoplist .top .title {
  color: white;
  font-size: 20px;
  font-weight: 700;
}
.shoplist .top input {
  height: 30px;
  width: 100%;
  margin-top: 5px;
  text-align: center;
  line-height: 30px;
  color: gray;
  border-radius: 20px;
}
.shoplist .banner {
  padding: 10px;
  height: 100px;
  position: relative;
}
.shoplist .banner img {
  border-radius: 5px;
  width: 340px;
  position: absolute;
}
.shoplist .guess {
  font-size: 18px;
  padding: 10px;
  font-weight: 700;
  color: rgb(48, 40, 40);
}
.shoplist .option {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
  color: rgb(48, 40, 40);
}
.shoplist .box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: rgb(48, 40, 40);
  font-size: 12px;
}
.shoplist .box div {
  background-color: rgba(212, 206, 206, 0.472);
  height: 26px;
  width: 24%;
  text-align: center;
  line-height: 26px;
  border-radius: 3px;
}
.shoplist .item {
  height: 380px;
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
.shoplist .list {
  display: flex;
  padding: 10px;
}
.shoplist .list img {
  width: 20%;
  margin-right: 10px;
}
.shoplist .list .right {
  width: 80%;
}
.shoplist .list .right .name {
  font-size: 14px;
  font-weight: 700;
  color: rgb(48, 40, 40);
  margin-bottom: 10px;
}
.shoplist .list .right .count {
  font-size: 12px;
  color: rgb(161, 155, 155);
  margin-bottom: 5px;
}
.shoplist .list .right .qisong {
  font-size: 14px;
  color: rgb(161, 155, 155);
  display: flex;
  justify-content: space-between;
}
</style>